<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
     <title>摄影师:<s:property value='#request.lgGalary.lpUser.realName'/>的作品</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="作品集">
	<meta http-equiv="description" content="来拍">
	<link href="css/share2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="jquery/download.js"></script>
   <style>
    #transparent_black {
	z-index: 1000;
	position: absolute;
	top: 80%;
	background-color: #000;
	/* width: 100%; */
	height: 20%;
	filter: alpha(opacity = 50); /*支持 IE 浏览器*/
	-moz-opacity: 0.50; /*支持 FireFox 浏览器*/
	opacity: 0.50; /*支持 Chrome, Opera, Safari 等浏览器*/
   }
   
   #transparent_black_show {
	z-index: 1100;
	position: absolute;
	vertical-align: middle;
	padding: auto;
	margin: 0 auto;
	color: white;
	font-size: 35px;
	text-align: left;
	top: 85%;
	background-color: transparent;
	/*  width: 100%;  */
	height: 20%;
}

 .newshoweel {
	width: 100%;
	position: relative;
	 height:900px;
	clear:both;
	margin: 0 auto;
	margin-top:10px;
}
   </style>
  
  
  <script type="text/javascript">
  $(function(){
	  var ids="<s:property value='#request.ids'/>";
      var count="<s:property value='#request.count' />";
  	  var galaryId="<s:property value='#request.lgGalary.galaryId' />";
	    $("#selectMore").click(function(){
  		$("#selectMore").hide();
  		$("#_loading").show();
  		var agrs={ids:ids,galaryId:galaryId};
      setTimeout(function(){
    	var index=false;
		$.ajax({
	         type : "post",  
	          url : "loadMorePictures.action",  
	          data : agrs,
	          async : false,
	          dataType:"json",
	          success : function(data){
	        	$("#_loading").hide();
	        	if(data.results.length==0){
	        		index=true;
	        	}
	  			$.each(data.results,function(index,item){
					ids=ids+item.photoId+",";
					$("#selectMore").before("<div class='showeel'>"+
						    "<div style=' position:absolute; width: 100%;height:auto;z-index:1; text-align: center;'><img  style='height:700px'  src='"+item.photoSrc+"' onload='javascript:DrawImage(this)'/></div>"
							+"</div>");
				})
			}
	     })
	    var l=ids.split(",").length;
		if(index){
			$("#hideMore").show();
			$("#selectMore").hide();
			$("#_loading").hide();
		}else{
			$("#selectMore").show();
		} 
		},500);
  		
  	})
	  
  })

function DrawImage(ImgD,divId){
var image=new Image();
var iwidth = 900;             //定义允许图片宽度，当宽度大于这个值时等比例缩小
var iheight = 700;            //定义允许图片高度，当宽度大于这个值时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){         //假如图片长宽都不为零

     if(image.height/image.width>= iheight/iwidth){       //通过正弦值判断图片缩放后是否偏高
      if(image.height>iheight){        //如果图片比设定的要高
       ImgD.height=iheight;
       ImgD.width=(image.width*iheight)/image.height;
        $("#"+divId).width(ImgD.width+"px");
         $("#"+divId).height(ImgD.height+"px");
        $("#firstImg").height(ImgD.height+"px");
        $("#transparent_black").css("width",ImgD.width); 
      }else{
       ImgD.width=image.width;
       ImgD.height=image.height;
        $("#"+divId).width(ImgD.width+"px");
          $("#"+divId).height(ImgD.height+"px");
        $("#firstImg").height(ImgD.height+"px");
       $("#transparent_black").css("width",ImgD.width); 
      }
 
     ImgD.alt=image.width+"×"+image.height;
     }
 
     else{           //如果图片比例 小于 设定的比例
      if(image.width>iwidth){
       ImgD.width=iwidth;
       ImgD.height=(image.height*iwidth)/image.width;
        $("#"+divId).width(ImgD.width+"px");
          $("#firstImg").height(ImgD.height+"px");
          $("#"+divId).height(ImgD.height+"px");
      
       $("#transparent_black").css("width",iwidth); 
      }else{
       ImgD.width=image.width;
       ImgD.height=image.height;
        $("#"+divId).width(ImgD.width+"px");
         $("#firstImg").height(ImgD.height+"px");
          $("#"+divId).height(ImgD.height+"px");
       
       $("#transparent_black").css("width",image.width); 
      }
     ImgD.alt=image.width+"×"+image.height;
      
      /*$(".transparent_white_show").css("width",image.width); */
     }
}
}	
function DrawImage3(ImgD){
var image=new Image();
var iwidth = 1200;             //定义允许图片宽度，当宽度大于这个值时等比例缩小
var iheight = 700;            //定义允许图片高度，当宽度大于这个值时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){         //假如图片长宽都不为零

     if(image.height/image.width>= iheight/iwidth){       //通过正弦值判断图片缩放后是否偏高
      if(image.height>iheight){        //如果图片比设定的要高
       ImgD.height=iheight;
       ImgD.width=(image.width*iheight)/image.height;
      }else{
       ImgD.width=image.width;
       ImgD.height=image.height;
      }
 
     ImgD.alt=image.width+"×"+image.height;
     }
 
     else{           //如果图片比例 小于 设定的比例
      if(image.width>iwidth){
       ImgD.width=iwidth;
       ImgD.height=(image.height*iwidth)/image.width;
      
       $("#transparent_black").css("width",iwidth); 
      }else{
       ImgD.width=image.width;
       ImgD.height=image.height;
       
      }
     ImgD.alt=image.width+"×"+image.height;
      
      /*$(".transparent_white_show").css("width",image.width); */
     }
}
}	



function DrawImage2(ImgD,imgDiv,divId){
var image=new Image();
var iwidth = 900;             //定义允许图片宽度，当宽度大于这个值时等比例缩小
var iheight = 700;            //定义允许图片高度，当宽度大于这个值时等比例缩小
image.src=ImgD.src;
if(image.width>0 && image.height>0){         //假如图片长宽都不为零

     if(image.height/image.width>= iheight/iwidth){       //通过正弦值判断图片缩放后是否偏高
      if(image.height>iheight){        //如果图片比设定的要高
      
       ImgD.height=iheight;
       ImgD.width=(image.width*iheight)/image.height;
        $("#"+divId).height(ImgD.height+"px");
        $("#"+imgDiv).height(ImgD.height+"px");
      }else{
       ImgD.width=image.width;
       ImgD.height=image.height;
         $("#"+divId).height(ImgD.height+"px");
        $("#"+imgDiv).height(ImgD.height+"px");
      }
 
     ImgD.alt=image.width+"×"+image.height;
     }
 
     else{           //如果图片比例 小于 设定的比例
      if(image.width>iwidth){
       ImgD.width=iwidth;
       ImgD.height=(image.height*iwidth)/image.width;
         $("#"+divId).height(ImgD.height+"px");
        $("#"+imgDiv).height(ImgD.height+"px");
      }else{
       ImgD.width=image.width;
       ImgD.height=image.height;
         $("#"+divId).height(ImgD.height+"px");
        $("#"+imgDiv).height(ImgD.height+"px");
      }
     ImgD.alt=image.width+"×"+image.height;
      
      /*$(".transparent_white_show").css("width",image.width); */
     }
}
}	



  </script>
  </head>
  
  <body >
  <div class="body">
		<div class="top">
			<table border="0" class="t1">
				<tr>
					<td><img src="css/images/logo.png" style="margin-left:20px;" width="150" height="160"/></td>
					<td>
							<div><span class="big500">来拍</span></div>
							<div><span>移动互联网影像平台</span></div>
						</td>
					<td><input type="button" class="bt" value="立刻下载"></td>
				</tr>
			</table>
		</div>
		<div class="showeel">
		    <div style="position:absolute; width: 100%;height:auto;z-index:1; text-align: center;">
		    <img   src="<s:property value="#request.lgGalary.galaryCover"/>" onload="javascript:DrawImage3(this)"/>
		    </div>
		     <div class="transparent_white">
		     </div>
		     <div class="transparent_white_show">
		     <table  border="0" style="width:100%;height:100%;text-align:center;margin:0 auto;">
		     <tr>
		      <td height="20%">&nbsp;</td>
		     </tr>
		     <tr>
		     <td><img src="<s:property value='#request.lgGalary.lpUser.headImage'/>" class="image150" /></td>
		     </tr>
		     <tr>
		     <td>摄影师:<s:property value='#request.lgGalary.lpUser.realName'/>-<s:property value="#request.lgGalary.lpUser.lpCity.cityName" /></td>
		     </tr>
		     <tr>
		     <td><hr style="width:58%;border-bottom-color:#9F7C83;border-bottom-style: solid;border-bottom-width:2px;"/></td>
		     </tr>
		     <tr>
		     <td><s:property value="#request.lgGalary.subjectName"/></td>
		     </tr>
		     <tr>
		     <td><s:property value="#request.lgGalary.lpService.lpServiceDetail.price"/>元/<s:property value="#request.lgGalary.lpService.lpServiceDetail.priceUnit"/></td>
		     </tr>
		      <tr>
		      <td height="30%">&nbsp;</td>
		     </tr>
		     </table>
		     </div>
		</div>
		<br/>
		<s:iterator value="#request.photos" id="p" status="status">
		<s:if test="#status.first==true">
		<div class="showeel" id="firstshow" style="text-align: center;margin:0 auto;">
		    <div id="firstImg" style="position:absolute; width: 100%;z-index:1; text-align: center;"><img  onload="javascript:DrawImage(this,'firstshow')" src="<s:property value="#p.photoSrc"/>"/>
		     <div id="transparent_black" style="margin-left:auto;margin-right:auto;"></div>
		     <div id="transparent_black_show" style="margin-left:auto;margin-right:auto;">
		     <div style="height:2%;"></div>
		     <div style="height:40%;">
		     
		    <!--  <s:property value="#request.lgGalary.galaryDesc"/> -->
		     <s:if test="#request.lgGalary.galaryDesc.length()>25">
			    <s:property value="#request.lgGalary.galaryDesc.substring(0,25)"/>····
			</s:if>
			<s:else>
			    <s:property value="#request.lgGalary.galaryDesc"/>
		    </s:else>
		     </div>
		     <div style="height:5%;"></div>
		     </div>
		    
		    </div>


		</div>
		</s:if>
		<s:else>
		<div class="showeel" id="out<s:property value="#p.photoId"/>">
		    <div id="<s:property value="#p.photoId"/>" style="position:absolute; width: 100%;height:auto;z-index:1; text-align: center;"><img   src="<s:property value="#p.photoSrc"/>" onload="javascript:DrawImage2(this,'<s:property value="#p.photoId"/>','out<s:property value="#p.photoId"/>')"/></div>
		</div>
		</s:else>
		</s:iterator>
		<!-- <s:if test="#request.count>#request.pageSize">
		<div class="showeel" style="height:20px;" id="selectMore">
		    <div style="position:absolute; width: 100%;height:auto;z-index:1;text-align: center; display: none"><a href="javascript:void(0)">查看更多照片</a></div>
		</div>
		<div class="showeel" style="height:20px;display: none;" id="_loading">
		    <div style="position:absolute; width: 100%;height:auto;z-index:1;text-align: center;"><img src="images/loading.gif" width="100" height="100"/></div>
		</div>
		<div class="showeel" style="height:20px;display: none;" id="hideMore">
		    <div style="position:absolute; width: 100%;height:auto;z-index:1;text-align: center;"><a href="javascript:void(0)" style="color:#857f7f">暂无更多作品</a></div>
		</div>
		</s:if><s:else>
		<div class="showeel" style="height:20px;">
		    <div style="position:absolute; width: 100%;height:auto;z-index:1;text-align: center;"><a href="javascript:void(0)" style="color:#857f7f">暂无更多作品</a></div>
		</div>
		</s:else> -->
		<br/>
		<br/>
		<br/>
		<br/>
	</div>
  </body>
</html>
